<template>
  <div class="all">
    <div class="a-nav">
      <el-button type="primary" @click="msg=true">创建工会</el-button>
      <el-input placeholder="请输入手机号查询" v-model="telephone"></el-input>
      <el-button type="primary" @click="query">查询</el-button>
    </div>
    <div style="padding-top: 5px;">
      <el-table :data="list" :header-cell-style="{background:'#eef3f7'}" :cell-style="{height:'87px'}">
        <el-table-column align="center" type="index" label="序号"></el-table-column>
        <el-table-column align="center" prop="unionName" label="工会名称"></el-table-column>
        <el-table-column align="center" prop="telephone" label="会长手机号"></el-table-column>
        <el-table-column align="center" label="工会简介">
          <template slot-scope="scope">
              <el-popover
                placement="top-start"
                title="工会简介"
                width="200"
                trigger="hover"
                :content="scope.row.info">
                <i slot="reference">{{scope.row.info}}</i>
              </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图标">
          <template slot-scope="scope">
              <el-image :src="scope.row.img"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <i v-if="scope.row.status!='解散'">{{scope.row.status}}</i>
            <i v-else>{{scope.row.status}} 【{{scope.row.shtReason}}】</i>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="工会招募须知" >
          <template slot-scope="scope">
              <el-popover
                placement="top-start"
                title="工会招募须知"
                width="200"
                trigger="hover"
                :content="scope.row.invite">
                <i slot="reference">{{scope.row.invite}}</i>
              </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="addTime" label="创建时间"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" v-if="scope.row.status!='解散'" @click="shop=true,dissolution.unionId=scope.row.unionId">解散</el-button>
            <i v-else>已解散</i>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="Page">
          <el-pagination
          background
          hide-on-single-page
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="condition.pageIndex"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="condition.quantity">
          </el-pagination>
    </div>
    <div class="hide"  v-if="shop">
    <div class="Popup" >
        <h3>解散原因<i class="el-icon-circle-close" @click="shop=false"></i></h3>
        <el-input
          type="textarea"
          placeholder="请输入内容"
          clearable
          resize='none'
          v-model="dissolution.shtReason">
        </el-input>
     <el-button type="danger" @click="dissolutionPost">解散</el-button>
     <el-button  @click="shop=false">取消</el-button>
    </div>
    </div>
<div class="hide"  v-if="msg">
  <div class="Popup">
    <h3>创建工会<i class="el-icon-circle-close" @click="msg=false"></i></h3>
      <table style="padding: 8px;width: 80%;margin: auto;">
        <tr >
          <th style="text-align: right;">会长手机号</th>
          <td style="text-align: left;">
            <el-input v-model="Create" placeholder="请输入手机号"></el-input></td>
        </tr>
        <tr>
          <td colspan="2" class="Tips">创建完成后，请登录<el-link type="primary">陌滋公会系统</el-link>初始密码：123456</td>
        </tr>
      </table>
      <el-button type="primary" @click="establish">创建</el-button>
      <el-button  @click="msg=false">取消</el-button>
  </div>
</div>

  </div>
</template>

<script>
  import {unionListPost,shutdown,Uncreate} from '@/utils/API'
   import Cookies from 'js-cookie'
  export default{
    inject:["reload"],
    data(){
      return{
        list:[],
        condition:{
          quantity:10,
          pageIndex:1,
          pageSize:10,
        },
        admin:{
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        },
        telephone:'',
        shop:false,
        msg:false,
        dissolution:{
          shtReason:'',
          unionId:''
        },
        Create:''
      }
    },
    methods:{
      //解散
      dissolutionPost(){
        console.log(this.dissolution)
        if(this.dissolution.shtReason){

          shutdown(this.dissolution,this.admin).then(res=>{
            if(res.code==0){
              this.$message.success('操作成功')
                 this.reload()
            }
            console.log(res)
          })
        }else{
          this.$message.error('请输入原因')
        }
      },
      //获取列表
      postList(e){
        unionListPost(e,this.admin,this.condition).then(res=>{
          this.list=res.data.unionList
          this.condition.quantity=res.data.total
          console.log(res)
        })
      },
      handleSizeChange(val) {
        this.condition.pageSize=val
       if(this.telephone){
          this.postList(this.telephone)
         }else{
          this.postList()
       }
      },
       handleCurrentChange(val) {
        if(this.telephone){
           this.postList(this.telephone)
          }else{
           this.postList()
        }
      },
      //查寻
      query(){

        if(this.telephone){
            var reg=/^1[3456789]\d{9}$/
            if(reg.test(this.telephone)){
              this.postList(this.telephone)
            }else{
              this.$message.error('请输入正确手机号')
            }
            console.log()
        }else{
            this.postList()
        }
      },
      //创建
      establish(){
        var _this
         var reg=/^1[3456789]\d{9}$/
        if(reg.test(this.Create)){
          Uncreate(this.Create,this.admin).then(res=>{
            if(res.code==0){
              this.$message.success('操作成功')
              this.reload()
            }
          })
          }
        }

    },
    mounted() {
      this.postList()
    }
  }
</script>

<style lang="scss" scope>
.el-image{
     max-width: 209px;
     max-height: 87px;
}
.el-input{
  width: 180px;
  margin-left: 10px;
}
.hide{
width: 100%;
    height: 100%;
    position: absolute;
    top: 0;

}
.Popup{
  width: 30%;
  padding-bottom: 10px;
  background-color: #fff;
  position: absolute;
    top: 21vh;
    left: 30%;
  text-align: center;
  z-index: 9;
  border-radius: 5px;
      border: 1px solid #eee;
  h3{
    text-align: left;
    padding: 5px 0 5px 6px;
  }
 .el-textarea{
        width: 80%;
        margin: 2% auto;
        display: block;
  }
  .Tips{
      font-size: 12px;
      padding-top: 5px;
      color: #999;
  }
}
.el-link{
     vertical-align: bottom;
}
</style>
